<template>
  <h1>你好 VUE3</h1>
  <div>你好，我叫{{ name }},今年{{ age }}岁,{{ sex }}</div>
  <div>a的值:{{ a }} (同名属性，vue3优先使用setup中的) </div>

  <br />
  <br />

  <button @click="say">vue2配置方式函数调用</button>
  <button @click="sayHello">vue3 steup返回函数调用</button>

  <br />
  <br />

  <button @click="test1">
    尝试在vue2 methods中使用 Vue3的setup函数中返回的属性与方法
  </button>
  <button @click="test2">
    尝试在vue3 setup中使用 Vue2方式配置的属性与方法
  </button>
</template>

<script>
// import { h } from "vue";
export default {
  name: "App",
  data() {
    return {
      sex: "男",
      a: 100,
    };
  },
  methods: {
    say() {
      alert(`我叫${this.name},今年${this.age}岁`);
    },
    test1() {
      console.log("尝试在vue2 methods中使用 Vue3的setup函数中返回的属性与方法");
      console.log(this.name);
      console.log(this.age);
      this.sayHello();
    },
  },
  setup() {
    let name = "张三";
    let age = 18;

    function sayHello() {
      alert(`我叫${name},今年${age}岁`);
    }

    function test2() {
      console.log("尝试在vue3 setup中使用 Vue2方式配置的属性与方法");
      console.log(this.sex);
      console.log(this.say);
    }

    // 返回一个对象 (常用) 对象中的属性可直接在模板中使用
    return {
      name,
      age,
      sayHello,
      test2,
      a: 200,
    };

    // 返回一个函数 （渲染函数） 渲染函数中返回的元素会替换模板中的内容
    // return () => h("div", "你好!!!，VUE3");
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
